<template>

    <div class="async-list">
        <p v-if="list.length == 0" style="text-align: center;">--</p>
        <StoreIconSelect v-for="item in normal" :key="item.id" :item="item" />
        <blockquote v-if="more.length > 0">
            <i class="iconfont icon-gengduodingdanguanli"></i>
            <cite>
                <StoreIconSelect v-for="item in more" :key="item.id" :item="item" />
            </cite>
        </blockquote>
    </div>

</template>
<script>
export default {
    props: {
        list: { type: Array, default: () => [] },
    },
    data () {
        return {
            count: 3,
        };
    },
    computed: {
        normal () {
            return this.list.slice(0, this.count)
        },
        more () {
            return this.list.slice(this.count)
        }
    },
    methods: {
    },
    created () {


    },
};
</script>
<style lang="scss" scoped>
.async-list {
    & > p {
        position: relative;
        width: 100%;
        padding: 5px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    & > .store-icon-select {
        height: 20px;
        padding: 0;
        width: 100%;
        overflow: hidden;

        & + .store-icon-select {
            margin-top: 14px;
        }
    }

    & > blockquote {
        margin: 14px 0 0;
        position: relative;
        cursor: default;

        i {
            font-size: 20px;
            display: flex;
            width: 20px;
            height: 20px;
            border: 1px solid #d9d9d9;
            border-radius: 20px;
            line-height: 18px;
            box-sizing: border-box;
        }
        & > cite {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 6px;
            background: #ffffff;
            box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
            border-radius: 8px;
            border: 1px solid #ebebeb;
            padding: 6px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s;

            & > .store-icon-select {
                height: 34px;
                padding: 0 6px;
            }
        }
        &:hover {
            i {
                background-color: #f6f6f6;
            }
            cite {
                opacity: 1;
                pointer-events: all;
            }
        }
    }
}
</style>
